<template>
  <el-upload
      v-model:file-list="imageLists"
      :action="uploadFileUrl"
      list-type="picture-card"
      :on-success="handleAvatarSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
    <el-icon>
      <Plus/>
    </el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image"/>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {Plus} from '@element-plus/icons-vue'

import type {UploadProps, UploadUserFile} from 'element-plus'
import {uploadFilePath} from "@/apis/http/system/FileHttp";

const uploadFileUrl = uploadFilePath()

const emit = defineEmits(["uploadImageMultiCallback"]);
const props = defineProps({
  imageLists: {
    type: Array,
    default: []
  }
})

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  let length = props.imageLists.length;
  let currentData: any = props.imageLists[length - 1];
  currentData['url'] = response.data.filePath
  props.imageLists[length - 1] = currentData
  emit('uploadImageMultiCallback', props.imageLists)
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
</script>
